<template>
<view>
<view class="container">
    <view class="message">
        <view>温馨提示：</view>
        <view>1.限时特价、预约资格等购买优惠可能一并取消</view>
        <view>2.如遇订单拆分、使用优惠券无法返还</view>
        <view>3.支付金额，抵扣余额积分都按原路退款</view>
        <view>4.订单一旦取消，无法恢复</view>
    </view>
    <form @submit="refundOrder">
        <view class="item" data-id="0" @tap="openReasonModalFun">
            <view class="item-name">退款原因:</view>
            <view class="item-input">{{reasonList[reasonSelect]}}</view>
            <view class="item-img">
                <image class="arrow" src="/static/images/icon-arrowdown.png"></image>
            </view>
        </view>
        <!-- <view class="item">
            <view class="item-name">联系人:</view>
            <input class="item-input" name="consignee" value="{{user.nickname}}"/>
        </view>
        <view class="item">
            <view class="item-name">手机号码:</view>
            <input class="item-input" name="mobile" value="{{user.mobile}}"/>
        </view> -->
        <button class="submit-btn" form-type="submit">申请退款</button>
    </form>
</view>

<!-- 取消订单原因弹框 -->
<view :hidden="!openReasonModal">
    <view class="cover-layer" @tap="closeReasonModal"></view>
    <view class="reason-modal">
        <icon type="cancel" color="gray" size="22" class="modal-close" @tap="closeReasonModal"></icon>
        <view class="reason-nav">取消原因</view>
        <radio-group class="reason-list" @change="reasonChange">
            <label v-for="(item, index) in reasonList" :key="index" class="reason-item">
                <radio :value="index" color="#ff6a00" :checked="index==reasonSelect"></radio> {{item}}
            </label>
        </radio-group>
        <view class="reason-btn" @tap="confirm">确 定</view>
    </view>
</view>
</view>
</template>

<script>
var app = getApp();
var setting = app.globalData.setting;
var request = app.globalData.request;

export default {
  data() {
    return {
      url: setting.url,
      resourceUrl: setting.resourceUrl,
      user: null,
      //用户信息
      openReasonModal: false,
      //是否打开地区弹框
      orderId: 0,
      index: 0,
      reasonSelect: 0,
      //选择取消订单的原因
      reasonList: ['订单不能按预计时间送达', '操作有误(商品、地址等选错)', '重复下单/误下单', '其他渠道价格更低', '该商品降价了', '不想买了', '其他原因']
    };
  },

  components: {},
  props: {},
  onLoad: function (options) {
    var that = this;
    this.setData({
      orderId: options.order_id
    });
    app.globalData.getUserInfo(function (userInfo) {
      that.setData({
        user: userInfo
      });
    });
  },
  methods: {
    /** 已付款未发货的取消订单 */
    refundOrder: function (e) {
      var that = this;
      request.post('/api/order/refund_order', {
        data: {
          order_id: that.orderId,
          user_note: that.reasonList[that.reasonSelect] // consignee: e.detail.value.consignee,
          // mobile: e.detail.value.mobile

        },
        success: function (res) {
          uni.showToast({
            title: '已提交申请',
            mask: true,
            duration: 1000,
            complete: function () {
              uni.setStorageSync('order:order_list:update', true);
              uni.setStorageSync('virtual:virtual_list:update', true);
              uni.setStorageSync('order:order_detail:update', true);
              uni.setStorageSync('order:bespeak_list:update', true);
              setTimeout(function () {
                uni.navigateBack();
              }, 1000);
            }
          });
        }
      });
    },
    openReasonModalFun: function () {
      this.setData({
        openReasonModal: true
      });
    },
    closeReasonModal: function () {
      this.setData({
        openReasonModal: false
      });
    },

    /** 改变取消订单理由 */
    reasonChange: function (e) {
      this.index = e.detail.value;
    },
    confirm: function () {
      this.setData({
        reasonSelect: this.index
      });
      this.closeReasonModal();
    }
  }
};
</script>
<style>
.container{
    font-size: 28rpx;
}
.message{
    padding: 60rpx 40rpx;
    line-height: 40rpx;
}
.item{
    float: left;
    padding: 0 30rpx; 
    width: 100%;
    box-sizing: border-box;
    border-bottom: 1rpx solid #f3f3f3;
    background-color: white;
    line-height: 100rpx;
    height: 100rpx;
    position: relative;
}
.item-name{
    float: left;
}
.item-input{
    float: left;
    height: 100rpx;
    width: 450rpx;
    margin-left: 20rpx;
    word-break: keep-all;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.arrow{
    position: absolute;
    right: 30rpx;
    width: 32rpx;
    height: 32rpx;
    padding-top: 30rpx;
}
.submit-btn{
    position: fixed;
    bottom: 80rpx;
    width: 50%;
    margin-left: 25%;
    font-size: 36rpx;
    background-color: #e23435;
    color: white;
    line-height: 100rpx;
}
/* 取消订单原因弹框 */
.reason-modal{
    z-index: 1000;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    overflow-y: hidden;
    color: #666666;
    background: white;
}
.reason-nav{
    text-align: center;
    font-size: 35rpx;
    padding-top: 30rpx;
}
.reason-list{
    padding: 20rpx 30rpx 40rpx;
    font-size: 28rpx;
}
.reason-item{
    display: block;
    padding: 20rpx 0;
}
.reason-btn{
    width: 100%;
    color: white;
    background-color: #ff6a00;
    line-height: 90rpx;
    text-align: center;
    font-size: 40rpx;
}

</style>